<template>
  <div id="CompanyIntroduction">
    <section class="page-banner">
      <div class="image-layer"></div>

      <div class="banner-inner">
        <div class="auto-container">
          <div class="inner-container clearfix">
          </div>
        </div>
      </div>
    </section>
    <div class="breadcrumb">
      <el-breadcrumb separator="/" class="router-row">
        <el-breadcrumb-item :to="{ path: 'Technologyintroduction' }">成果列表</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">成果详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="search-box">
      <h3 class="titleOrg" v-if="isShow">{{detailData.titleOrg}}</h3>
      <div class="detail-text" v-html="detailData.contentsCn" @click="targetNodeNameClick"></div>

      <el-descriptions v-if="isShow" class="margin-top" title="列表" :column="1" direction="horizontal" border style="margin-top: 30px">
        <el-descriptions-item label="发布时间">{{ detailData.publishTime }}</el-descriptions-item>
        <el-descriptions-item label="研究机构">{{ detailData.researchAgency }}</el-descriptions-item>
        <el-descriptions-item label="研究人员" :span="2">{{ detailData.researchGroup }}</el-descriptions-item>
        <el-descriptions-item label="研究团队">{{ detailData.researchGroup }}</el-descriptions-item>
        <el-descriptions-item label="研究进展">{{ detailData.researchProgress }}</el-descriptions-item>
        <el-descriptions-item label="研究成果">{{ detailData.researchResults }}</el-descriptions-item>
        <el-descriptions-item label="科研评价">{{ detailData.researchEvaluation }}</el-descriptions-item>
        <el-descriptions-item label="原文链接">
          <el-tag size="small" style="cursor:pointer;" @click="goHtml">
            {{ detailData.url }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-tabs v-if="isShow" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="图片" name="first">
          <el-image
            style="width: 300px; height: 200px"
            :src="url"
            fit="contain"
            :preview-src-list="[url]"
            >
          </el-image>
        </el-tab-pane>
        <el-tab-pane label="视频" name="second">
          <video
            style="width: 300px; height: 150px;"
            @click="openVideo(item)"
            v-for="item in detailData.bizVedioList"
            :src="item.contentsCn"
            :poster="item.avator"
          ></video>
        </el-tab-pane>
      </el-tabs>

    </div>
    <el-dialog
      :visible.sync="videoDialog"
      width="65.5%"
      center
      class="videoPlayer"
    >
      <div>
        <video-player
          ref="videoPlayer"
          class="video-player vjs-big-play-centered"
          :playsinline="false"
          :options="playerOptions"
          @ready="onPlayerReady"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @ended="onPlayerEnd($event)"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getDetailList} from "../api/api";
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
  name: 'ProdDetail',
  data(){
    return{
      videoList: [],
      mp4Url: '',
      mp4Pic: '',
      detailData: {},
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      ],
      videoDialog: false,
      isShow: true,
      activeName: 'first',
      htmlCont:'这是摘要内容，关键词是<span style="color: #1363c6;cursor: pointer" onclick="toPath(`遥遥领先`)">遥遥领先</span>，内容内容内容' +
        '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
      nums: 0,
      ruleForm: {
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        name: '',
        region: '',
        institution: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        fileAreaHeight: 675,
        fileType: 'mp4', // 资源的类型
      },
    }
  },
  computed: { // 使用计算属性
    playerOptions () {
      const playerOptionsObj = {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //视频播放速度
        autoplay: false, // 如果true，浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
        language: 'zh-CN',
        // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',	// 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
          src: this.mp4Url // 视频url地址
        }],
        poster: this.mp4Pic, // 视频封面地址
        // width: document.documentElement.clientWidth,
        width: 1200,
        height: this.fileAreaHeight,	// 设置高度，fluid需要设置成flase
        notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true,  // 显示持续时间
          remainingTimeDisplay: false,  // 是否显示剩余时间功能
          fullscreenToggle: true  //全屏按钮
        }
      }
      return playerOptionsObj
    }
  },
  methods: {
    targetNodeNameClick(event) {
      if (event.target.nodeName == "A") {
        event.preventDefault();
        // 使用浏览器打开
        let url = event.target.getAttribute('href')
        if (url) {
          this.$router.push({
            name: 'technologyintroduction',
            query: {
              name: url
            }
          })
        }
        return false
      }
    },
    openVideo(item) {
      this.videoDialog = true;
      this.mp4Url = item.contentsCn;
      this.mp4Pic = item.avator;
    },
    // 准备好了
    onPlayerReady(v) {
      console.log(1)
      console.log(v)
    },
    // 播放了
    onPlayerPlay(v) {
      console.log(2)
      console.log(v)
    },
    // 暂停了
    onPlayerPause(v) {
      console.log(3)
      console.log(v)
    },
    // 播放结束了
    onPlayerEnd(v) {
      console.log(4)
      console.log(v)
    },
    goHtml() {
      window.open(this.detailData.url)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toPath(val) {
      console.log('跳转',val)
    },
    navClick() {
      this.$router.push({
        name: 'home',
        query: {}
      })
    },
  },
  beforeRouteUpdate (to, from, next) {
    // 监听路由变化时触发该钩子函数
    this.detailData.contentsCn = to.query.detail
    if (to.query.isShow) {
      this.isShow = false
    }
    this.$nextTick(() => {
      // 更新DOM之后再次执行$forceUpdate()
      this.$forceUpdate()
    })

    next()
  },
  mounted(){
    window.toPath = this.toPath
    console.log('this.$route.query', this.$route.query)
    if (this.$route.query.isShow) {
      this.isShow = false
      this.detailData.contentsCn = this.$route.query.detail.replaceAll("target=\"_blank\"", "target=\"_blank\" style=\"color: #1363c6;cursor: pointer\"")
      console.log('this.detailData.contentsCn', this.detailData.contentsCn)
    } else {
      getDetailList({id:this.$route.query.id}).then(res => {
        this.detailData = res.data.data
        this.url = res.data.data.avator
        console.log('this.url',this.url)
      }).catch(err => {
        console.log(err)
      })
    }
  }

}
</script>
<style scoped>
.video-js .vjs-icon-placeholder {
  width: 80%;
  height: 80%;
  display: block;
}
.videoPlayer /deep/ .el-dialog,
.el-pager li {
  //background: none !important;
  margin-top: 6vh !important;
}
.my-img:hover{
  cursor:pointer;
}
/deep/ .link-url {
  z-index: 999999999;
  display: block;
  color: red;
  width: 100%;
  height: 20px;
}
/deep/ .vjs-poster {
 background-size: 100% 100%;
}
/deep/ .el-descriptions-item__cell {
  width: 0;
}
.detail-text {
  margin-bottom: 40px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1363c6!important
}
/deep/ .el-pagination.is-background .el-pager li:hover {
  color: #1363c6!important
}
.box-row {
  position: relative;
  display: block;
  padding: 20px 0px;
}
.goDetail {
  cursor: pointer;
  position: absolute;
  right: 20px;
  height: 80px;
  padding-top: 60px;
  width: 150px;
  display: block;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}
.goDetail:hover {
  color: #1363c6;
}
.content {
  width: 75%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titile {
  color: #222222;
  font-weight: 700;
  line-height: 1.25em;
  margin: 0 0 5px;
}
.tags {
  width: max-content;
  position: relative;
  display: inline-block;
  font-size: 13px;
  text-transform: capitalize;
  line-height: 20px;
  color: #ffffff;
  background: #1363c6;
  padding: 3px 10px;
  border-radius: 13px;
  margin-bottom: 20px;
}
.item-date:before {
  content: '';
  position: absolute;
  left: 50px;
  top: 15px;
  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}
.item-date {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 101px;
  height: 160px;
  color: #222222;
  text-align: center;
  font-family: 'Manjari', sans-serif;
  .date {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    font-size: 30px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    z-index: 3;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    .day {
      position: relative;
      display: block;
      line-height: 30px;
      padding-top: 25px;
    }
    .month {
      position: relative;
      display: block;
      font-size: 12px;
      text-transform: uppercase;
      color: #757575;
      line-height: 20px;
    }
  }
}
.list-item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 165px;
  min-height: 160px;
  padding-top: 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.list-item:hover {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.box-row:before {
  content: '';
  position: absolute;
  right: -30px;
  top: -2px;
  left: -30px;
  bottom: -1px;
  display: block;
  background: #ffffff;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.box-row:after {
  content: '';
  position: absolute;
  left: 140px;
  right: 0;
  bottom: 0px;
  display: block;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.list-box {
  display: flex;
  flex-direction: column;
}
.confirm {
  .el-button--primary {
    background-color: #1363c6;
    border-color: #1363c6;
  }
}
.demo-ruleForm {
  padding-top: 25px;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
}
.router-row {
  width: 1320px;
  margin: 0 auto;
  line-height: 38px;
}
.breadcrumb {
  margin: 10px 0;
  color: #858d8f;
  background-color: #f5f6f8;
  line-height: 38px;
  font-size: 13px;
}
.type-select {
  position: relative;
//line-height: 56px;
//padding: 12px 50px 12px 20px;
//border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #061138;
  display: block;
  font-size: 14px;
  width: 100%;
//height: 56px;
  border-radius: 2px;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);
  font-weight: 500;
}
.box-left {
  width: 100%;
  padding: 30px 0 ;
}
.search-box {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 30px;
}
.titleOrg {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.cooperation{
  width: 100%;
  height: 520px;
}
.page-banner {
  margin-top: 69px;
  position: relative;
  padding: 0;
  color: #ffffff;
}

.page-banner .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image:url(../assets/img/main-slider/banner-image-5.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-banner .image-layer:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.40);
}

.page-banner .banner-inner {
  position: relative;
  display: block;
  text-align: center;
  z-index: 2;
}

.page-banner .inner-container {
  position: relative;
  padding: 140px 0px;
}

.page-banner h1 {
  position: relative;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0;
}

.page-banner .page-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-bottom: 15px;
  text-align: left;
  font-weight: 700;
  font-family: 'Manjari', sans-serif;
}

.page-banner .bread-crumb {
  position: relative;
  display: inline-block;
}

.page-banner .bread-crumb li {
  position: relative;
  float: left;
  font-size: 13px;
  line-height: 24px;
  color: #bababa;
  font-weight: 700;
  text-transform: uppercase;
  cursor: default;
  padding-right: 15px;
  margin-right: 15px;
}

.page-banner .bread-crumb li:before {
  position: absolute;
  right: -15px;
  width: 30px;
  text-align: center;
  font-size: 10px;
  line-height: 24px;
  color: #bababa;
  font-weight: 400;
  content: "_";
}

.page-banner .bread-crumb li:last-child {
  padding-right: 0;
  margin-right: 0;
}

.page-banner .bread-crumb li:last-child:before {
  display: none;
}

.page-banner .bread-crumb li a {
  color: #bababa;
  font-weight: 500;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.page-banner .bread-crumb li a:hover,
.page-banner .bread-crumb li.active {
  color: #ffffff;
}
</style>

